import React, { useEffect, useState } from 'react'
import request from './utils/axios'
import Detail from './components/Detail'
/* 
  useState:
    - 让函数式组件支持state状态
    - useState() 方法里面唯一的参数就是初始 state
    - useState返回一个只有两个元素的数组
      - 第一个元素是当前的 state 的值
      - 第二个元素是一个函数,用来替换原来state中的值,这个函数的修改state和setState一样是异步的
    - React 会在重复渲染时记住它当前state的值，并且提供最新的值给我们的函数
*/
/* 
  useEffect:
    - Effect Hook 可以让你在函数组件中执行副作用操作
    - Effect可以告诉 React 组件需要在挂载完成、更新完成、卸载前执行某些操作
    - useEffect接受第一个参数是一个回调函数,当达到条件的时候,会触发当前的回调函数
    - useEffect接受第二个参数是一个数组
      - 数组中传入state,则当前state发生改变的时候触发当前effect中的回调函数
      - 如果传递的是一个空数组,则useEffct回调函数只有在初始化阶段才执行
      - 如果不传递第二个参数,则无论初始化还是更新的时候都会执行

    - useEffect的回调函数可以返回一个函数,当组件被卸载的时候,或再次渲染的时候,会执行这个函数,用来做收尾工作

    - useEffect可以根据逻辑书写多次
*/

export const AppContext = React.createContext()

export default function App() {

  const [users, setUsers] = useState([])

  useEffect(() => {
    (async () => {
      try {
        const data = await request.get('/user/queryUserList')
        setUsers(data)
      } catch (error) {
        alert(error.message)
      }
    })()
  }, [])

  return (
    <div>
      <h2>useState&useEffect Hook</h2>
      <table style={{textAlign: 'center', width: '600px'}}>
        <thead>
          <tr>
            <td>用户名</td>
            <td>注册时间</td>
            <td>登录时间</td>
            <td>登录状态</td>
          </tr>
        </thead>
        <tbody>
          {
            users.map(item => {
              const { _id } = item
              return (
                <AppContext.Provider key={_id} value={item}>
                  <Detail key={_id} />
                </AppContext.Provider>
              )
            })
          }
        </tbody>
      </table>
    </div>
  )
}
